<template>
  <div class="add-info">
    <div class="submmit">
      <el-button type="primary" style="float:right;" @click="saveinfo">保存信息</el-button>
    </div>
    <div class="create-main">
      <el-form ref="createInfo" :model="createInfo" :rules="rules" class="create-form">
        <el-form-item label prop="title">
          <el-input v-model="createInfo.title" class="hide" placeholder="标题"/>
        </el-form-item>
        <el-form-item>
          <tinymce v-model="createInfo.body" :height="400" style="margin-top:10px;"/>
        </el-form-item>
        <el-form-item style="margin-top:40px;">
          <el-upload
            :on-change="handleChange"
            :http-request="upLoadFile"
            action=""
            class="upload-demo"
            accept="image/jpg, image/png"
            drag
            multiple
          >
            <i class="el-icon-upload"/>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议图片尺寸为 754×424px，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addNewInformation, getCategory, updateInformation } from '@/api/operate/information'
import Tinymce from '@/components/Tinymce'
import { upLoadFile } from '@/api/upLoadFile.js' // 数据接口
import { getTenantId, getUserId, getUserName } from '@/utils/auth'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      createInfo: {
        id: '',
        title: '',
        promoted: true,
        featured: true,
        sticky: false,
        body: '',
        thumbId: '',
        thumb: ''
      },
      rules: {
        title: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      list: {
        title: ''
      },
      classify: []
    }
  },
  mounted() {
    // 筛选出需要的id 和 label 放到classify
    getCategory(getTenantId()).then(response => {
      const classify = response.data.items.map(item => {
        const data = {}
        data.label = item.name
        data.value = item.id
        return data
      })
      this.classify = classify
    })
    this.getInfoData()
  },
  methods: {
    changeStatus(row) {
      const addData = Object.assign({}, row)
      if (addData.updateTime) addData.updateTime = Date.parse(new Date(addData.updateTime))
      if (addData.status === '已发布') addData.status = 'published'
      if (addData.status === '未发布') addData.status = 'unpublished'
      if (addData.status === '回收站') addData.status = 'trash'
      return addData
    },
    saveinfo() {
      this.$refs.createInfo.validate((valid) => {
        if (valid) {
          if (this.createInfo.id) {
            updateInformation(this.changeStatus(this.createInfo)).then(() => {
              this.$router.push('/mbterminal/article')
            })
          } else {
            this.createInfo.userId = getUserId()
            this.createInfo.userName = getUserName()
            this.createInfo.tenantId = getTenantId()
            addNewInformation(this.changeStatus(this.createInfo)).then(() => {
              this.$router.push('/mbterminal/article')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getInfoData() {
      if (this.$route.params) {
        this.createInfo = this.$route.params
      }
    },
    handleChange(file) {
      this.file = file.raw
    },
    upLoadFile() {
      const form = new FormData()
      form.append('name', this.file.name)
      form.append('uid', this.file.uid)
      form.append('file', this.file)
      upLoadFile(form).then(response => {
        this.createInfo.thumbId = response.data.id
        this.createInfo.thumb = response.data.url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-info {
  .create-main {
    width: 100%;
    padding: 52px 52px 0 52px;
    .create-form {
      .el-form-item__label {
        font-size: 18px;
      }
      .hide {
        text-align: left;
        .el-input__inner {
          font-size: 20px;
          border-top-width: 0;
          border-left-width: 0;
          border-right-width: 0;
          border-bottom-width: 1px;
          /*outline: medium;*/
        }
      }
    }
  }
  .submmit {
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #e6eaee;
    padding-right: 30px;
    padding-top: 17px;
  }
}
</style>
